<template>
    <ui-main title="echart - 百度图表">
        <div class="item one">
            <!--<div class="ui flex row-around">
                <div class="item one" style="height:500px">
                    &lt;!&ndash; 柱状图 &ndash;&gt;
                    <ui-echarts style="position:absolute"  :option="bar" ref="uiChart" width="500px" height="400px" @node-zr-click='nodeZrClick'></ui-echarts>
                </div>
                <div class="item one" style="height:500px; background: #333;">
                    &lt;!&ndash; 饼图 &ndash;&gt;
                    <ui-echarts dark :option="pie" width="400px" height="400px"></ui-echarts>
                </div>
            </div>
            <div slot="toolbar" class="ui flex col-center">
                <a class="ui teal button mini" href="http://echarts.baidu.com/examples.html">echart文档</a>
                <a class="ui blue button mini"
                    href="http://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts">echart的按需引入表
                </a>
            </div>-->
            <ui-echarts style="position:absolute; z-index:9"
                :option="line"
                ref="uiChart"
                width="100%"
                height="700px"
                ></ui-echarts>
            <ui-echarts style="position:absolute"
                :option="line2"
                ref="uiChart"
                width="100%"
                height="700px"
               ></ui-echarts>
        </div>
        <!--<div class="item one">
            <ui-load-md file="echarts.md"></ui-load-md>
        </div>-->
    </ui-main>
</template>
<script>
    export default {
        data() {
            return {
                bar: {
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '直接访问',
                            type: 'bar',
                            barWidth: '60%',
                            data: [10, 52, 200, 334, 390, 330, 220]
                        }
                    ]
                },
                pie: {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '30',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: [
                                { value: 335, name: '直接访问' },
                                { value: 310, name: '邮件营销' },
                                { value: 234, name: '联盟广告' },
                                { value: 135, name: '视频广告' },
                                { value: 1548, name: '搜索引擎' }
                            ]
                        }
                    ]
                },
                line: {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        }
                    },

                    xAxis: {
                        gridIndex: 0,
                        show: false,
                        type: 'category',
                        boundaryGap: false,
                        data: ['2017年2季度', '2017年3季度', '2017年4季度', '2018年1季度', '2018年2季度', '2018年3季度', '2018年4季度', '2019年1季度', '2019年2季度', '2019年3季度', '2019年4季度', '2020年1季度']
                    },
                    yAxis: {
                        type: 'value',
                        splitNumber: 10,
                        axisLabel: {
                            textStyle: {
                                color: '#a8aab0',
                                fontStyle: 'normal',
                                fontFamily: '微软雅黑',
                                fontSize: 12
                            },
                            formatter: function(value, index) {
                                if (value < 30) {
                                    return ''
                                }
                                return `${ value - 30 }`;
                            }
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#E5E9ED'
                                // 	opacity:0.1
                            }
                        }

                    },

                    series: [{
                        name: '远安县明宇矿业有限公司老林坡尾矿库',
                        type: 'line',
                        markLine: {
                            lineStyle: {
                                width: 2
                            },
                            label: {
                                position: 'insideEndTop',
                                formatter: '{b}',
                                color: '#333'
                            },
                            symbolSize: 0,
                            data: [{
                                name: '红色风险',
                                yAxis: 720,
                                lineStyle: {
                                    color: '#f60902'
                                }
                            }, {
                                name: '橙色风险',
                                yAxis: 240,
                                lineStyle: {
                                    color: '#f89933'
                                }
                            }, {
                                name: '黄色风险',
                                yAxis: 80,
                                lineStyle: {
                                    color: '#facc00'
                                }
                            }, {
                                name: '蓝色风险',
                                yAxis: 50,
                                lineStyle: {
                                    color: '#65a1d7'
                                }
                            }]
                        },
                        data: [30, 44.1, 47.2, 45.5, 62.4, 72.4, 72.4, 54.1, 37.2, 25.5, 42.4, 30]
                    }, {
                        name: '远安县明宇矿业有限公司老林坡尾矿库2',
                        type: 'line',
                        data: [45.3, 45.3, 44.3, 25.3, 35.3, 35.3, 35.3, 35.3, 35.3, 35.3, 35.3, 35.3]
                    }]
                },
                line2: {
                    xAxis: [{
                        show: false
                    },
                        {
                            gridIndex: 1,
                            min: '0',
                            max: '11',
                            name: '时间(S)',
                            position: 'bottom',
                            nameGap: 5, //轴名字距离轴距离
                            splitLine: {
                                show: false
                            },
                            axisLabel: {
                                showMinLabel: false,
                                showMaxLabel: true,
                                //如果图表高度固定的话可以设置一个的固定值显示在零刻度线下面
                                margin: '10'
                            },
                            axisTick: {
                                show: true,
                                inside: false
                            },
                            interval: 1, //隔几显示一个刻度
                            show: true,
                            data: ['2017年2季度', '2017年3季度', '2017年4季度', '2018年1季度', '2018年2季度', '2018年3季度', '2018年4季度', '2019年1季度', '2019年2季度', '2019年3季度', '2019年4季度', '2020年1季度']
                        },
                        {
                            gridIndex: 2,
                            min: '0',
                            max: '11',
                            data: ['2017年2季度', '2017年3季度', '2017年4季度', '2018年1季度', '2018年2季度', '2018年3季度', '2018年4季度', '2019年1季度', '2019年2季度', '2019年3季度', '2019年4季度', '2020年1季度'],
                            name: '时间(S)',
                            position: 'bottom',
                            nameGap: 5, //轴名字距离轴距离
                            splitLine: {
                                show: false
                            },
                            axisLabel: {
                                showMinLabel: false,
                                showMaxLabel: true,
                                //如果图表高度固定的话可以设置一个的固定值显示在零刻度线下面
                                margin: '10'
                            },
                            axisTick: {
                                show: true,
                                inside: false
                            },
                            interval: 1, //隔几显示一个刻度
                            show: true
                        }

                    ],
                    yAxis: [{
                        show:false
                    },
                        {
                            min: '0',
                            max: '2',
                            gridIndex: 1,
                            axisLabel: {
                                show: false
                                // showMinLabel: true,
                                // showMaxLabel: false
                            },
                            interval: 2,

                            axisTick: {
                                show: true,
                                inside: false
                            },
                            splitNumber: 1,
                            name: '粘度调节类',
                            nameLocation: 'center',
                            splitLine: {
                                show: false
                            },
                            show: true
                        },
                        {
                            min: '0',
                            max: '2',
                            gridIndex: 2,
                            axisLabel: {
                                show: false
                                // showMinLabel: true,
                                // showMaxLabel: false
                            },
                            interval: 2,

                            axisTick: {
                                show: true,
                                inside: false
                            },
                            splitNumber: 1,
                            name: '搭建开关量',
                            nameLocation: 'center',
                            splitLine: {
                                show: false
                            },
                            show: true
                        }
                    ],
                    grid: [{
                        top: '17%',
                        height: '45%'
                    },
                        {
                            top: '62%',
                            height: '15%'
                        },
                        {
                            top: '77%',
                            height: '15%'
                        }
                    ],
                    series: [

                        {
                            type: 'line',
                            step: 'middle',
                            symbol: 'none',
                            smoothMonotone: {
                                x: 0
                            },
                            markLine: {
                                data: [
                                    { type: 'max' }
                                ]
                            },
                            data: [
                                [0, 0],
                                [1, 1],
                                [2, 0],
                                [3, 1],
                                [4, 1],
                                [5, 1],
                                [6, 1],
                                [7, 1],
                                [8, 0],
                                [9, 1],
                                [10, 0],
                                [11, 1]
                            ],
                            xAxisIndex: 1,
                            yAxisIndex: 1,
                            smooth: true,
                            areaStyle: {}
                        },
                        {
                            type: 'line',
                            step: 'middle',
                            symbol: 'none',
                            smoothMonotone: {
                                x: 0
                            },
                            markLine: {
                                data: [
                                    { type: 'max' }
                                ]
                            },
                            data: [
                                [0, 0],
                                [1, 1],
                                [2, 0],
                                [3, 0],
                                [4, 1],
                                [5, 1],
                                [6, 1],
                                [7, 1],
                                [8, 0],
                                [9, 1],
                                [10, 0],
                                [11, 1]
                            ],
                            xAxisIndex: 2,
                            yAxisIndex: 2,
                            smooth: true,
                            areaStyle: {}
                        }

                    ]
                },
                line3: {}
            }
        },
        /*methods: {
            nodeZrClick(item) {
                console.log(Math.abs(item))
            }
        },
        mounted() {
            this.$refs.uiChart.InsChart().then(value => {
                value.getZr().on('click', (params) => {
                    let pointInPixel = [params.offsetX, params.offsetY]
                    if (value.containPixel('grid', pointInPixel)) {
                        let xIndex = value.convertFromPixel({
                            seriesIndex: 0
                        }, [params.offsetX, params.offsetY])[0]
                        console.log(xIndex)
                    }
                })
            })
        }*/
    }
</script>
